<template>
  <div class="dashboard-view">
    <div class="dashboard-container">
      <el-row :gutter="20" class="dashboard-row">
        <!-- 设备状态看板 -->
        <el-col :span="12">
          <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
            <template #header>
              <div class="card-header">
                <span>设备状态</span>
                <div class="header-actions">
                  <el-button link @click="toggleFullscreen('deviceStatus')">
                    <el-icon><FullScreen /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="card-body" ref="deviceStatusRef">
              <device-status-panel />
            </div>
          </el-card>
        </el-col>
        
        <!-- 功图散点图看板 -->
        <el-col :span="12">
          <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
            <template #header>
              <div class="card-header">
                <span>示功图</span>
                <div class="header-actions">
                  <el-button link @click="toggleFullscreen('scatterPlot')">
                    <el-icon><FullScreen /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="card-body" ref="scatterPlotRef">
              <scatter-plot-panel />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="dashboard-row">
        <!-- 实时数据看板 -->
        <el-col :span="12">
          <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
            <template #header>
              <div class="card-header">
                <span>实时数据</span>
                <div class="header-actions">
                  <el-button link @click="toggleFullscreen('realTimeData')">
                    <el-icon><FullScreen /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="card-body" ref="realTimeDataRef">
              <real-time-panel />
            </div>
          </el-card>
        </el-col>

        <!-- 设备参数编辑看板 -->
        <el-col :span="12">
          <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
            <template #header>
              <div class="card-header">
                <span>设备参数编辑</span>
                <div class="header-actions">
                  <el-button link @click="toggleFullscreen('deviceParams')">
                    <el-icon><FullScreen /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            <div class="card-body" ref="deviceParamsRef">
              <device-params-panel />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import DeviceStatusPanel from '../components/dashboard/DeviceStatusPanel.vue';
import ScatterPlotPanel from '../components/dashboard/ScatterPlotPanel.vue';
import RealTimePanel from '../components/dashboard/RealTimePanel.vue';
import DeviceParamsPanel from '../components/dashboard/DeviceParamsPanel.vue';
import { FullScreen } from '@element-plus/icons-vue';

// 全屏相关
const deviceStatusRef = ref(null);
const scatterPlotRef = ref(null);
const realTimeDataRef = ref(null);
const deviceParamsRef = ref(null);

// 切换全屏显示
const toggleFullscreen = async (panel) => {
  const refs = {
    deviceStatus: deviceStatusRef,
    scatterPlot: scatterPlotRef,
    realTimeData: realTimeDataRef,
    deviceParams: deviceParamsRef
  };

  const element = refs[panel].value;
  if (!element) return;

  try {
    if (!document.fullscreenElement) {
      await element.requestFullscreen();
    } else {
      await document.exitFullscreen();
    }
  } catch (err) {
    ElMessage.error('全屏切换失败');
  }
};
</script>

<style scoped>
.dashboard-view {
  height: 100%;
  padding: 20px;
  background-color: #f0f2f5;
  background-image: linear-gradient(to bottom, rgba(64, 158, 255, 0.05), transparent);
}

.dashboard-container {
  height: 100%;
}

.dashboard-row {
  margin-bottom: 20px;
}

.dashboard-card {
  height: calc(50vh - 60px);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border: none;
  background: rgba(255, 255, 255, 0.9);
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(90deg, #409EFF 0%, #0052D9 100%);
  border: none;
  position: relative;
  overflow: hidden;
  height: 40px;
}

.card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.card-header span {
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  padding-left: 12px;
}

.card-header span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.header-actions {
  display: flex;
  gap: 8px;
}

:deep(.el-button--text) {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  padding: 4px;
}

:deep(.el-button--text:hover) {
  color: white;
  transform: scale(1.1);
}

.card-body {
  height: calc(100% - 40px);
  padding: 12px;
}

/* 全屏样式 */
.card-body:fullscreen {
  padding: 20px;
  background: white;
  width: 100vw;
  height: 100vh;
}

:deep(.el-card__body) {
  height: calc(100% - 40px);
  padding: 0;
}

:deep(.el-card) {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
</style>
